<template>
  <q-page class='fit column q-pa-md q-gutter-y-md'>
    <q-card fix bordered>
      <q-table
        title='车辆列表'
        :columns='columns'
        :rows='rows'
        :loading='loading'
        :rows-per-page-options='[5,10,20]'
        v-model:pagination='pagination'
        @request='getList'
      >
        <template #no-data>
          <div class='full-width row flex-center q-gutter-sm text-body1'>
            暂无数据
          </div>
        </template>

        <!--购买新车-->
        <template #top-right>
          <AddTruck />
        </template>

        <!--删除某辆车-->
        <template #body-cell-operate='props'>
          <q-td :props='props'>
            <DeleteTruck :id='props.row.id' :status='props.row.status' />
          </q-td>
        </template>

      </q-table>
    </q-card>
  </q-page>
</template>

<script lang='ts'>
import { defineComponent, onMounted, ref } from 'vue';
import { getCarList } from 'src/services/api';
import { TableOption } from 'app/typings';
import AddTruck from 'components/AddTruck.vue';
import DeleteTruck from 'components/DeleteTruck.vue';

const columns = [{
  name: 'id',
  label: '车辆编号',
  field: 'id',
  align: 'center'
}, {
  name: 'status',
  label: '车辆状态',
  field: 'status',
  align: 'center',
  format: (val: number) => val === 0 ? '空闲' : '运输中'
}, {
  name: 'operate',
  label: '操作',
  field: 'operate',
  align: 'center'
}];

export default defineComponent({
  name: 'TruckManage',
  components: { DeleteTruck, AddTruck },
  setup() {
    const rows = ref();
    const loading = ref(false);
    const pagination = ref({
      page: 1,
      rowsNumber: 0,
      rowsPerPage: 5
    });

    const getList = async (options: TableOption) => {
      loading.value = true;
      try {
        const response = await getCarList({
          pageNum: options.pagination.page,
          pageSize: options.pagination.rowsPerPage
        });
        rows.value = response.items;
        pagination.value.page = options.pagination.page;
        pagination.value.rowsPerPage = options.pagination.rowsPerPage;
        pagination.value.rowsNumber = response.total;
      } catch (error) {
      }
      loading.value = false;
    };

    onMounted(async () => {
      await getList({
        pagination:
          {
            page: pagination.value.page,
            rowsPerPage: pagination.value.rowsPerPage
          }
      });
    });

    return {
      columns,
      rows,
      loading,
      pagination,
      getList,
    };
  }
});
</script>
